<template>
  <div class="app-container">
    <el-button
      icon="Plus"
      type="primary"
      size="small"
      @click="add"
      v-hasPermi="['member:mpBanner:add']"
      >新增</el-button
    >
    <h3></h3>
    <x-table :propList="propList" :tableData="tableData">
      <template #img="{ row }">
        <el-image
          :src="row.img_url_show"
          style="width: 200px; height: 100px"
          :preview-src-list="[row.img_url_show]"
        ></el-image>
      </template>
      <template #status="{ row }">
        <el-tag type="success" v-if="row.status == 1"> 启用 </el-tag>
        <el-tag type="danger" v-else> 禁用 </el-tag>
      </template>
      <template #op="{ row }">
        <el-button
          type="primary"
          link
          icon="Edit"
          @click="changeBanner(row)"
          v-hasPermi="['member:mpBanner:change']"
          >修改</el-button
        >
        <el-button
          type="primary"
          link
          icon="Delete"
          @click="delBanner(row)"
          v-hasPermi="['member:mpBanner:del']"
          >删除</el-button
        >
      </template>
    </x-table>
    <Dialog
      width="50%"
      :title="dialogConfig.title"
      v-model:isShowDialog="isShowDialog"
      @confirm="submit"
    >
      <Form ref="formRef" v-bind="dialogConfig.formConfig">
        <template #path v-if="isShowDialog">
          <!-- <el-form-item label="图片" label-width="100px" prop="path"> -->
          <!-- <ImgUpload
              width="400"
              :value="dialogConfig.formConfig.formData.img_url_show"
              @input="imgSuccess"
              @remove="remove"
              :limit="1"
            ></ImgUpload> -->
          <!-- {{ dialogConfig.formConfig.formData.img_url_show }} -->
          <ImageUpload
            :uploadImgUrl="uploadImgUrl"
            v-model="dialogConfig.formConfig.formData.img_url_show"
            @input="imgSuccess"
            :limit="1"
          >
            <!-- :extParams="{ appid: $store.getters.curMpInfo.appid }" -->
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg,png,jpeg,gif文件，且不超过500kb
              </div>
            </template>
          </ImageUpload>
          <span
            >支持png、jpeg、jpg,gif格式,推荐使用长方形的图片,尺寸:750*300</span
          >
          <!-- </el-form-item> -->
        </template>
      </Form>
    </Dialog>
  </div>
</template>

<script>
import ImgUpload from "@/components/ImageUpload";
import { uploadImgUrl } from "@/api/mpManage/mpUpload";
import { dialogConfig, propList, defaultFormData } from "./config";
import {
  getList as getBannerList,
  change as changeBanner,
  del as delBanner,
  add as addBanner,
} from "@/api/mpManage/mpBanner";
const baseUrl =
  import.meta.env.VITE_APP_ENV == "development"
    ? import.meta.env.VITE_APP_BASE_API
    : window.location.origin;
export default {
  name: "mpBanner",
  components: {
    ImgUpload,
  },
  data() {
    return {
      uploadImgUrl,
      dialogConfig,
      propList,
      isShowDialog: false,
      tableData: [],
      searchInfo: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.getInfo();
    },
    async getInfo() {
      const { data } = await getBannerList();

      data.items.forEach((item) => {
        item.img_url_show = baseUrl + "/" + item.path;
      });
      this.tableData = data.items;
    },
    delBanner(item) {
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {
          return delBanner(item.id);
        })
        .then(() => {
          this.getInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    imgSuccess(res) {
      if (res.code == 200) {
        this.dialogConfig.formConfig.formData.img_url_show =
          baseUrl + "/" + res.data.url;
        // 传给后端的
        this.dialogConfig.formConfig.formData.path = res.data.url;
      }
    },
    remove() {
      this.dialogConfig.formConfig.formData.path = "";
      this.dialogConfig.formConfig.formData.img_url_show = "";
    },
    add() {
      this.isShowDialog = true;
      this.dialogConfig.formConfig.formData = { ...defaultFormData };
      this.dialogConfig.formConfig.formData.path = "";
      this.dialogConfig.formConfig.formData.img_url_show = "";
      this.$nextTick(() => {
        this.$refs.formRef.resetFields();
      });
    },
    changeBanner(item) {
      item.img_url_show = baseUrl + "/" + item.path;
      this.dialogConfig.formConfig.formData = { ...item };
      this.isShowDialog = true;
    },
    submit() {
      console.log(this.dialogConfig.formConfig.formData);
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          console.log(this.dialogConfig.formConfig.formData);
          const formData = this.dialogConfig.formConfig.formData;
          if (formData.id) {
            await changeBanner(formData);
          } else {
            await addBanner(formData);
          }
          this.$message.success("操作成功!");
          this.isShowDialog = false;
          this.getInfo();
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
